import axios from 'axios';
import React, { Component } from 'react'
// import store from './store/index'

import * as types from './store/types.js'

// 3. 导入连接器 connect
// connect: 可以用来连接状态和视图用的，连接 react 和 redux 用的
import {connect} from 'react-redux'

class App extends Component {

  // 5. 在组件内通过 this.props 使用全局状态和修改方法

  componentDidMount(){
      // 发送数据请求
      this.props.requestBannerList()
      this.props.requestProList()
  }

  render() {

    return (
      <div>
        <h1>App --- {this.props.count}</h1>
        <button onClick={()=>{
          this.props.add()
        }}>加1</button>
        <button onClick={()=>{
          this.props.reduce()
        }}>减1</button>
        <button onClick={()=>{
          this.props.addNum(8)
        }}>加指定数</button>
        <button onClick={()=>{
          this.props.reduceNum(10)
        }}>减指定数</button>


        <hr />
        <hr />
        <hr />

        {
          this.props.bannerList.length &&
          this.props.bannerList.map(item => {
            return (<img src={item.img} style={{height: 100}} key={item.bannerid} />)
          })
        }

{
          this.props.proList.length &&
          this.props.proList.map(item => {
            return (<p  key={item.proid}>{item.proname}</p>)
          })
        }

      </div>
    )
  }
}

// 将全局状态中的数据添加在当前组件的 props 属性中
const mapStateToProps = (state)=>{

  // return 出去的内容就是被加在 props 中的内容
  return {
    count: state.app.count,
    bannerList: state.pro.bannerList,
    proList: state.pro.proList
  }
}


// 将全局状态中修改的方法添加在视图组件的 props 中
const mapDispatchToProps = (dispatch)=>{

  // return 出去的内容就是被加在 props 中的内容
  return {
    add(){
      dispatch({type: types.ADD})
    },
    addNum(val){
      dispatch({type: types.ADDNUM, payload: val})
    },
    reduce(){
      dispatch({type: types.REDUCE})
    },
    reduceNum(val){
      dispatch({type: types.REDUCENUM, payload: val})
    },
    requestBannerList(){
      axios('http://121.89.205.189:3000/api/banner/list').then(res => {
        dispatch({type: types.CHANGE_BANNER_LIST, payload: res.data.data})
      })
    },
    requestProList(){
      axios('http://121.89.205.189:3000/api/pro/list').then(res => {
       dispatch({type: types.CHANGE_PRO_LIST, payload: res.data.data})
      })
    }
  }
}

// 4. 将全局状态和修改方法映射到视图组件中
// connect 的返回值是一个高阶组件
// connect(将全局状态中的数据映射到 props 中, 将全局状态的修改方法映射到 props 中)
export default connect(mapStateToProps, mapDispatchToProps)(App)

